<script setup lang="ts">
import { ref, getCurrentInstance } from 'vue'
import { useRoute } from 'vue-router'
import { message } from 'ant-design-vue'
import * as echarts from 'echarts'
import Tip from './components/Tip.vue'
import { useBrandStore } from '@/store/modules/brand'
const brandStore = useBrandStore()
const route = useRoute()
let chart = ref<echarts.ECharts | null>(null)

const oneRef = ref(null)
const TipRef = ref()

onMounted(() => {
  // const instance = getCurrentInstance()
  // if (instance && instance.appContext.config.globalProperties.$echarts) {
  //   chart.value = instance.appContext.config.globalProperties.$echarts.init(oneRef.value)
  //   drawOne(chart.value)
  // }
  // if (brandStore.showSystemTip) {
  //   let systemTipFlag = sessionStorage.getItem('systemTipFlag')
  //   // console.log('systemTipFlag=', systemTipFlag)
  //   if (!systemTipFlag) {
  //     TipRef.value.showModal()
  //     sessionStorage.setItem('systemTipFlag', true)
  //     setTimeout(() => {
  //       sessionStorage.setItem('systemTipFlag', false)
  //     }, 1000 * 60 * 60 * 2)
  //   }
  // }
})

// 柱形图
const drawOne = (chart: any) => {
  let option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [
          120,
          {
            value: 200,
            itemStyle: {
              color: '#a90000',
            },
          },
          150,
          80,
          70,
          110,
          130,
        ],
        type: 'bar',
      },
    ],
  }

  chart.setOption(option)
}

const onResize = () => {
  if (chart.value) {
    // 销毁当前图表实例
    chart.value.dispose()

    // 初始化新的图表实例
    chart.value = echarts.init(oneRef.value)

    // 重新绘制图表
    drawOne(chart.value)
  }
}

window.addEventListener('resize', onResize)

let dxTokenRef = ref()
const add = () => {
  dxTokenRef.value.callbackFn()
}

const getToken = (e: any) => {
  console.log(e)
}
</script>

<template>
  <page-container :title="route.meta.title">
    <Tip ref="TipRef"></Tip>

    <DxToken ref="dxTokenRef" @onSuccessfully="getToken"></DxToken>

    <a-card>
      <h3>正在开发中...</h3>
      <!-- <a-button @click="add">顶象</a-button> -->
      <!-- <div ref="oneRef" class="one"></div> -->
    </a-card>
  </page-container>
</template>

<style lang="less" scoped>
.hiddenText {
  display: inline-block;
  width: 1000px;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

a:hover {
  color: red;
}

.one {
  width: 100%;
  height: 400px;
}
</style>
